<template>
	<view class="main-box">
		<u-field v-if="type==0" v-model="oldPassword" label="旧密码" type="password" placeholder="请填写旧密码">
		</u-field>
		<u-field v-model="password" label="密码" type="password" placeholder="请填写密码">
		</u-field>
		<u-field v-model="password_confirmation" label="确认密码" type="password" placeholder="请填写确认密码">
		</u-field>
		<u-button class="getCode" :style="[inputStyle]" @click="handleToConfirm">确认</u-button>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		retrievePassword,
		resetPassword
	} from '../../api/user'
	export default {
		data() {
			return {
				token: '',
				email: '',
				oldPassword: '',
				password: '',
				password_confirmation: '',
				type: 0
			}
		},
		computed: {
			inputStyle() {
				let style = {};
				if (this.password_confirmation && this.password) {
					style.color = "#fff";
					style.backgroundColor = '#92c8ff';
				}
				return style;
			}
		},
		onLoad(option) {
			if (option.token) {
				this.token = option.token;
			}
			if (option.email) {
				this.email = option.email;
			}
			if (option.type) {
				this.type = option.type;
			}
		},
		methods: {
			handleToConfirm() {
				if (this.type == 0) {
					if (this.user_info) {
						if (this.valid()) {
							this.resetPassword(this.access_token, this.oldPassword, this.password, this.password_confirmation).then(res => {
								this.$refs.uToast.show({
									title: '修改成功',
									type: 'success',
									isTab: true,
									url: '/pages/user/user',
									position: 'top'
								})
							})
						}
					}
				} else {
					if (this.token) {
						if (this.valid()) {
							this.retrievePassword(this.email, this.password, this.password_confirmation, this.token).then(res => {
								this.$refs.uToast.show({
									title: '修改成功',
									type: 'success',
									isTab: true,
									url: '/pages/user/user',
									position: 'top'
								})
							})
						}
					} else {

					}
				}
			},
			retrievePassword(email, password, password_confirmation, token) {
				return new Promise((resolve, reject) => {
					retrievePassword({
						email,
						password,
						password_confirmation,
						token
					}).then(res => {
						if (res.code == 200) {
							this.$u.vuex('access_token', res.data.access_token);
							this.$u.vuex('user_info', res.data.userInfo);
							resolve('ok')
						} else {
							reject(res.msg)
						}
					})
				})
			},
			resetPassword(access_token, oldPassword, password, password_confirmation) {
				return new Promise((resolve, reject) => {
					resetPassword({
						'Authorization': 'Bearer ' + access_token
					}, {
						oldPassword,
						password,
						password_confirmation
					}).then(res => {
						if (res.code == 200) {
							this.$u.vuex('access_token', res.data.access_token);
							this.$u.vuex('user_info', res.data.userInfo);
							resolve('ok')
						} else {
							reject(res.msg)
						}
					})
				})
			},
			valid() {
				if (this.type == 0) {
					if (!this.oldPassword || !this.password || !this.password_confirmation) {
						this.$refs.uToast.show({
							title: '密码不能为空',
							type: 'error',
							position: 'top'
						})
						return false;
					}
					if (this.oldPassword.length < 6 || this.password.length < 6 || this.password_confirmation.length < 6) {
						this.$refs.uToast.show({
							title: '密码长度不能小于6位',
							type: 'error',
							position: 'top'
						})
						return false;
					}
					return true;
				} else {
					if (!this.password || !this.password_confirmation) {
						this.$refs.uToast.show({
							title: '密码不能为空',
							type: 'error',
							position: 'top'
						})
						return false;
					}
					if (this.password.length < 6 || this.password_confirmation.length < 6) {
						this.$refs.uToast.show({
							title: '密码长度不能小于6位',
							type: 'error',
							position: 'top'
						})
						return false;
					}
					return true;
				}
			}
		}
	}
</script>

<style scoped>
	.main-box {
		padding: 80rpx;
	}

	.getCode {
		margin-top: 20rpx;
		background-color: rgba(146, 200, 255, .4);
		color: rgba(255, 255, 255, .8);
		border: none;
		font-size: 30rpx;
		padding: 12rpx 0;
	}

	.getCode::after {
		border: none;
	}
</style>
